<style>
  .seed_good_list_ssk {
    position: relative;
    width: 77% !important;
  }
  .seed_good_list_ssk img {
    top: 0.8rem;
    left: 1.2rem;
  }
  .seed_good_list_cbox {
    margin-top: 0.8rem;
  }
  .seed_good_list_brief {
    font-size: 1.1rem;
    color: #898989;
    position: relative;
    left: 0.5rem;
    text-align: left;
    top: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .seed_good_list_name {
    position: relative !important;
    height: auto !important;
  }
  .seed_good_list_price_box {
    position: absolute !important;height: auto; bottom: 0.2rem; top: auto !important;
  }
  .seed_good_list_disable {
    color: #dcdcdc;
  }
</style>
<template>
  <div>
    <div class="seed_top_banner">
      <div class="seed_back_arrow" @click="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zuo"></use>
        </svg>
      </div>
      <div class="seed_page_title"><span>商品列表</span></div>
      <div class="seed_page_tool"></div>
    </div>
    <div class="seed_list_container">
      <div class="seed_list_ss" style="width: 100% !important;">
        <div class="seed_list_ssk seed_user_list_ssk">
          <img src="@/assets/images/ss.png" alt="">
          <input class="seed_list_ss" type="text" placeholder="输入商品名称" v-model="param.goods_name">
        </div>
        <input class="seed_list_ssb" type="button" value="搜索" @click="search">
      </div>
      <div class="seed_list_second" style="padding: 0 !important; margin-bottom: 0 !important;"
         v-infinite-scroll="loadMoreGoods"
         infinite-scroll-disabled="false"
         infinite-scroll-distance="0"
         infinite-scroll-immediate-check="false">
        <!--每一个订单-->
        <div class="seed_list_second_list" v-for="(item, index) in list" v-bind:key="index">
          <div class="seed_list_second_cbox seed_good_list_cbox">
            <img v-bind:src="item.goods_thumb">
            <div class="seed_list_second_cbox_r">
              <p class="seed_list_second_cbox_r_t seed_good_list_name">{{item.goods_name}}</p>
              <!--<p class="seed_good_list_brief">{{item.goods_brief}}</p>-->
              <div class="seed_list_second_cbox_b seed_good_list_price_box">
                <div class="seed_list_second_cbox_b_l" style="margin-left: 0.5rem;">
                  <span>￥</span>
                  <u>{{item.goods_price}}</u>
                </div>
              </div>
            </div>
          </div>
          <div class="seed_list_second_b_b">
            <div class="seed_list_second_b_b_l" @click="editGood(item.goods_common_id)">编辑</div>
            <div class="seed_list_second_b_b_r" @click="putOnSale(item.goods_common_id, index)" v-if="item.is_on_sale < 1">商品上架</div>
            <div class="seed_list_second_b_b_r" @click="pullOffSale(item.goods_common_id, index)" v-if="item.is_on_sale === 1">商品下架</div>
          </div>
        </div>
      </div>
      <loading-more :allLoaded="allLoaded" :show="list.length > 0"></loading-more>
      <empty-data :show="allLoaded && list.length <= 0" style="margin-top: 1rem"></empty-data>
      <back-nav></back-nav>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [],
      param: {
        page: 1,
        page_size: 5,
        goods_name: '',
        type: 'all_goods_list'
      },
      allLoaded: false,
      loading: false
    }
  },
  created () {
    this.getGoodsList()
  },
  methods: {
    back () {
      this.$router.push({name: 'Home'})
    },
    getGoodsList () {
      this.loading = true
      this.$request.GoodsList(this.param).then(data => {
        if (this.param.page_size > data.length) {
          this.allLoaded = true
        }
        this.list = [...this.list, ...data]
      }).finally(() => {
        this.loading = false
      })
    },
    loadMoreGoods () {
      if (this.loading || this.allLoaded) { // 正在加载 或 已取得全部数据
        return
      }
      setTimeout(() => {
        ++this.param.page
        this.getGoodsList()
      }, 300)
    },
    pullOffSale: function (id, index) {
      this.$MessageBox.confirm('确定要下架该商品吗？').then(action => {
        let param = {
          id: id,
          status: -1
        }
        this.$request.PutOrPullGood(param).then(data => {
          this.list[index].is_on_sale = -1
          this.$toast('操作成功')
        })
      })
    },
    putOnSale: function (id, index) {
      this.$MessageBox.confirm('确定要上架该商品吗？').then(action => {
        let param = {
          id: id,
          status: 1
        }
        this.$request.PutOrPullGood(param).then(data => {
          this.list[index].is_on_sale = 1
          this.$toast('操作成功')
        })
      })
    },
    search: function () {
      this.param.page = 1
      this.param.page_size = 5
      this.allLoaded = false
      this.loading = false
      this.list = []
      this.getGoodsList()
    },
    editGood: function (goodsCommonId) {
      this.$router.push({name: 'good-operate_edit', params: {goods_common_id: goodsCommonId}})
    }
  }
}
</script>
